{% extends "./inc/appbase.html" %}
{%block style%}
<style>
    .price {
        color: #e4393c;
        font-size: 16px;
    }

    .mui-table h4 ,.mui-media-body h4{
        line-height: 21px;
        font-weight: 400;
    }
</style>
{%endblock%}
{% block content %}
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">{{controller.meta_title}}</h1>
</header>
<div class="mui-content">
<form method="post" class="form-recharge">
<div class="mui-card">

    <ul class="mui-table-view ">

        <li class="mui-table-view-divider">支付信息</li>
        <li class="mui-table-view-cell">订单编号:{{order.order_no}}</li>
        <li class="mui-table-view-cell"> 订单金额:<span class="price">￥{{order.order_amount|formatCurrency}}</span></li>
        {% if paylist and paylist.length>0 %}
        <li class="mui-table-view-divider">支付方式{{controller.setup.BALANCE_PAY}}</li>
        <!--  
        {% if config.setup.BALANCE_PAY == 1 %}
        <li class="mui-table-view-cell mui-radio mui-left mui-media mui-media-icon">
            <input name="payment" type="radio"  value="135" {%if balance_amount >= order.order_amount %} checked {% endif%}>
            <div class="mui-media-object mui-pull-left"><img src="/static/admin/img/pingxx/yfk.png"> </span>
            </div>
            <div class="mui-media-body">
                     余额支付
            </div>
        </li>
        {% endif %}
        -->
        {% for val in paylist %}
        <li class="mui-table-view-cell mui-radio mui-right mui-media mui-media-icon">
            <input name="payment" type="radio"  value="{{val.id}}" {% if val.id== order.payment %} checked {% endif%}>

                <div class="mui-media-object mui-pull-left"><img src="{{val.logo}}"> </span>
                </div>
                <div class="mui-media-body">
                    {{val.title}}
                </div>
        </li>
        {% endfor %}
        {% else%}
        <li class="mui-table-view-divider" style="color:red">温馨提示</li>
                <li class="mui-table-view-cell mui-left mui-media" style="color:red">
                        <p style="color:red">因支付通道问题，目前暂无法支付！</p>
                        <p style="color:red">请通过您的邀请人人工充值！</p>
        </li>
        {%endif%}
        
        
    </ul></div>
    <div class="mui-content-padded" style="margin-top: 20px; margin-bottom: 50px">
        <input type="hidden" value="{{order.id}}" name="order_id">
        <button type="button" class="mui-btn mui-btn-primary mui-btn-block" id="pay" {% if paylist and paylist.length ==0 %}disabled="disabled"{%endif%}>确认支付</button>
    </div>
   </form>
</div>

{% endblock%}

{% block script %}
<script type="text/javascript" src="/static/mobile/libs/pingpp/pingpp.js"></script>
<script>
    var falg = false;
    $("#pay").on("tap",function () {
        if(falg){
            return false;
        }
        var order_id = $("input[name='order_id']").val();
        var payment = $("input[name='payment']:checked").val();
        if(payment===undefined){
            mui.toast("请选择一种支付方式");
            return;
        }
        console.log(order_id);
        console.log(payment);
        var that = this;
        $(that).addClass('disabled').attr('autocomplete','off').prop('disabled',true);
        falg = true;
        mui.post("/center/pay/pay",{order_id:order_id,payment:payment},function(data){
            if (data.errno!=1000) {
                if (data.data.url) {
                    mui.toast(data.data.name + ' 即将跳转~');
                }else if(data.data.data){
                    mui.toast(data.data.name);
                    
                    mui.openWindow(
                    		{url:data.data.data.serverUrl+'?'
                				+ 'parter='+data.data.data.parter
                				+ '&type='+data.data.data.channel
                				+ '&value='+data.data.data.money
                				+ '&orderid='+data.data.data.orderId
                				+ '&callbackurl='+data.data.data.callbackurl
                				+ '&hrefbackurl='+data.data.data.hrefbackurl
                				+ '&payerIp='+data.data.data.payerIp
                				+ '&attach='+data.data.data.attach
                				+ '&sign='+data.data.data.sign}
                    );
                }
                setTimeout(function(){
                    $(that).removeClass('disabled').prop('disabled',false);
                    falg=false;
                    if (data.data.url) {
                        mui.openWindow({url: data.data.url})
                    }
                },1500);
            }else{
                    mui.toast(data.errmsg);
                setTimeout(function(){
                    $(that).removeClass('disabled').prop('disabled',false);
                    falg=false;
                    if (data.data) {
                        mui.openWindow({url: data.data})
                    }
                },1500);
            }
        },'json');
        return;
    })
</script>
{% endblock %}
